<template>
  <div class="content">
    <BreadNav
      :location="location"
      :routers="routers"
    />
    <main>
      <article>
        <div class="about">
          <p>承接业务：</p>
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;承接项目，网站搭建，网站关键词优化（关键词单词优化，网站整站优化）。网站定制服务。
          </p>
          <p>职业规划</p>
          <p>需要的朋友们可以联系我，</p>
          <p>联系电话：18706064133（微信同号）</p>
          <p>换友链联系：1597993292</p>
          <p>
            <img
              src="../assets/QRcode.png"
              alt=""
            />
          </p>
        </div>
      </article>
      <aside>
        <AsideHobby />
      </aside>
    </main>
    <Footer />
  </div>
</template>

<script>
import BreadNav from '@/components/BreadNav.vue'
import Footer from '@/components/Footer.vue'
import AsideHobby from '@/components/AsideHobby.vue'
export default {
  components: {
    BreadNav,
    Footer,
    AsideHobby
  },
  data() {
    return {
      location: '承接业务',
      routers: 'chengjieyewu'
    }
  }
}
</script>

<style lang="scss" scoped>
// 宽度大于1201px时
@media screen and (min-width: 1201px) {
  .content {
    width: 1200px;
    margin: 0 auto;
  }
}

// 宽度小于1200px时
@media screen and (max-width: 1200px) {
  .content {
    margin: 0 40px;
  }
}

@media only screen and (max-width: 768px) {
  article {
    width: 100%;
  }
}

@media only screen and (max-width: 768px) {
  aside {
    display: none;
  }
}

@media only screen and (max-width: 480px) {
  .content {
    margin: 0 15px;
  }
  body .content main article .about {
    padding: 20px 10px;
  }
}

.content {
  main {
    display: flex;
    article {
      width: 860px;
      .about {
        background: #fff;
        padding: 20px;
        font-size: 16px;
        overflow: hidden;
        border-radius: 3px;
        p {
          margin-bottom: 20px;
          line-height: 24px;
          img {
            display: block;
            margin: 20px auto;
            max-width: 50%;
          }
        }
      }
    }
    aside {
      width: 320px;
      margin-left: 20px;
      .aside_right {
        padding: 20px;
        background: #fff;
        margin-bottom: 20px;
        h2 {
          margin: 0 0 20px 0;
        }
        ul {
          margin-bottom: 30px;
          li {
            background: #f5f5f5;
            border-radius: 10px;
            margin-bottom: 10px;
            text-indent: 2em;
            line-height: 30px;
            height: 30px;
          }
        }
      }
    }
  }
}
</style>
